<template>
  <div class="index">
    <h1>志在巅峰&nbsp;&nbsp;赢在今晚</h1>
    <ul class="btns">
      <li>
        <router-link :to="{name:'draw', params: {type:'five'}}">
          <div class="btn">五等奖</div>
        </router-link>
      </li>
      <li>
        <router-link :to="{name:'draw', params: {type:'four'}}">
          <div class="btn">四等奖</div>
        </router-link>
      </li>
      <li>
        <router-link :to="{name:'draw', params: {type:'three'}}">
          <div class="btn">三等奖</div>
        </router-link>
      </li>
      <li>
        <router-link :to="{name:'draw', params: {type:'two'}}">
          <div class="btn">二等奖</div>
        </router-link>
      </li>
      <li>
        <router-link :to="{name:'draw', params: {type:'one'}}">
          <div class="btn">一等奖</div>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1{
    font-size: 64px;
    color:#ebe8db;
  }
  .index{
    width:100%;
    text-align:center;
    margin: auto;
  }
  .btns{
    width:200px;
    margin: auto;
    margin-top:20px;
    padding: 0;
  }
  .btns li{
    list-style-type:none;  
    height: 50px;
    font-size: 24px;
    line-height: 44px;
  }
  .btn{
    background: url(../../static/btn.png)  no-repeat;
    width:200px;
  }
  a{
    text-decoration:none;
    color:#ebe8db;
  }
</style>
